<template>
  <div class="order">
       <nav-bar>
         <template #left>
              <van-icon name="arrow-left" @click="backHome" />
         </template>
             <template #center>
                  订单
         </template>
       </nav-bar>
       <div class="order_con">
         <van-tabs color="#ffc400">
          <van-tab :title="item" v-for="item in navData" :key="item">
            <div v-if="item==='全部'&&order.length">
             <van-card 
              v-for="i in order"  
              :key="i.id"
              :num="i.num"
              :price="i.price"
              :title="i.title"
              :thumb="i.pic"
            />
            </div>
            <Blank v-else></Blank>
          </van-tab>
        </van-tabs>

       </div>
      <tab-bar></tab-bar>
  </div>
</template>

<script>
import TabBar from '../components/common/TabBar.vue'
import NavBar from '../components/common/NavBar.vue'
import Blank from '../components/common/Blank.vue'
import { reactive, toRefs } from '@vue/reactivity'
import {useRouter} from 'vue-router'
import {useStore} from 'vuex'
import { computed } from '@vue/runtime-core'
export default {
   name:'Order',
   components:{
     TabBar,
     NavBar,
     Blank
   },
   setup(){
     const router = useRouter();
     const store = useStore();
      let data = reactive({
        navData:['全部','交易完成','代付款','待发货','已发货']
      })
      const order = computed(()=>{
          return store.state.orderListED
      })
      const backHome=()=>{
       router.back();
      }
      return {
        ...toRefs(data),
        backHome,
        store,
        order
      }
   }
}
</script>

<style scoped lang="less">

/deep/ .van-tabs__line{
  color: #ffc400;
}

</style>